class Vue {
  constructor( options ) {
    const { beforeCreate, created, beforeMount, mounted } = options;
    this.$options = options;
    if(typeof beforeCreate == 'function')
      beforeCreate.bind(this)();
    this.$data = options.data;
    if(typeof created == 'function')
      created.bind(this)();
    if(typeof created == 'function')
      beforeMount.bind(this)();
    this.$el = document.querySelector(options.el);
    if(typeof created == 'function')
      mounted.bind(this)();
    // 模板解析
    this.compile(this.$el);
  }
  compile(node) {
    // 遍历节点
    // console.log(node.childNodes);
    node.childNodes.forEach((item, index) => {
      // console.log(item);
      // console.log(item.nodeType);
      // 元素节点
      if(item.nodeType == 1) {
        // click属性
        if(item.hasAttribute('@click')) {
          // @click绑定的名称
          const funName = item.getAttribute('@click').trim();
          const { methods } = this.$options;
          // 添加事件
          item.addEventListener('click', (event) => {
            this.eventFn = methods[funName].bind(this);
            this.eventFn(event);
          });
          
        }
        if(item.childNodes.length > 0) {
          this.compile(item);
        }
      }
      // 节点类型为3，为文本节点
      if(item.nodeType == 3) {
        // 正则匹配
        let reg = /\{\{(.*?)\}\}/g;
        let text = item.textContent;
        // 给节点赋值
        item.textContent = text.replace(reg, (match, vmKey) => {
          vmKey = vmKey.trim();
          return this.$data[vmKey];
        });
      }
    })
  }
}